<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aaa在线翻译</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <!--点击按钮跳转到history.html-->
            <h1>AAA在线翻译

                <a href="history.html"><button type="button"  class="btn btn-primary">查看翻译历史记录</button></a>

            </h1>
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <h2>
                        请输入原文：

                    </h2>
                    <div class="form-group">
                        <textarea id="fromText" class="form-control" rows="3"></textarea>
                    </div>
                    <label for="lang">请选择要翻译的语言</label>
                    <select class="form-control" id="lang">
                        <option value="en">英语</option>
                        <option value="jp">日语</option>
                        <option value="fra">法语</option>
                    </select>
                    <div class="form-group">
                        <label>点击按钮开始翻译</label><br>
                        <button type="button" id="translation" class="btn btn-primary">开始翻译</button>
                    </div>

                </div>
                <div class="col-md-6 column">
                    <h2>
                        翻译结果：
                    </h2>
                    <div class="form-group">
                        <textarea id="toText" class="form-control" rows="9"></textarea>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    $("#translation").click(function () {

        //获取原文文本域的内容
        var fromText = $("#fromText").val();
        if (fromText == '' || fromText == null) {
            alert("请输入原文！");
            $("#fromText").focus();
        } else {
            //获取要翻译成的语言
            var lang = $("#lang").val();
            //通过jquery发送ajax请求，同步请求
            $.ajax({
                url: "translate",//请求的后端接口路径
                data: {"fromText": fromText, "lang": lang},//传递给后台的参数
                dataType: "text",//相应的数据类型：服务器给我的
                type: "post",//请求的类型，get，post,delete,option
                async: false,//同步
                success: function (dataInfo) {//请求成功之后的回调函数
                    //获取响应信息dataInfo，名字随意
                    //将翻译结果写入到页面上
                    $("#toText").val(dataInfo);

                }
            })
        }


    });
</script>
</html>
